<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./login.js">

    </script>
    <script src="./jquery.js">

    </script>
    <style>
        form {
            width: 400px;
            background-color: white;
            margin:  auto;
            padding: 1rem;
            text-align: center;
            border-radius: 10px;
            opacity: 0.7;
        }

        body{
            display: flex;
            flex-direction: column;
            background-image: url(pic.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        form>div {
            margin: 1rem 0;
        }
        #part1{
            display: flex;
            height: 33vh;
            justify-content: center;
        }
        #part2{
            flex-direction: column;
            display: flex;
            height: 33vh;
            text-align: center;
        }
        #part3{
            display: flex;
            height: 33vh;
        }
        #but{
            text-align: center;
        }

        html{
            height: 100%;
            width: 100%;

        }
    </style>
</head>
<body>
<div id="part1">
</div>
<div id="part2">
    <form action="" class="login" method="post">
        <h1>登录界面</h1>
        <div>
            <label for="userName" class="text-input">用户名</label>
            <input type="text" id="userName" placeholder="输入用户名">
        </div>
        <div>
            <label for="password" class="text-input">密码</label>
            <input type="password" id="password" placeholder="输入密码">
        </div>

        <div id="but">
            <button type="submit" onclick="check()">确认</button>
            <button type="reset">取消</button>
        </div>
    </form>
</div>
<div id="part3">
</div>

</body>

</html>